<template>
	<div>
		<main-content
			v-if="pageType === 'i'"
			:tableHeight.sync="tableHeight"
			:otherDependenComponents="otherDependenComponents"
		>
			<template slot="query">
				<el-form
					ref="formRef"
					:inline="true"
					:model="queryData"
					class="flex-warp-container"
				>
					<el-form-item
						:label="'统计日期' + ':'"
						class="flex-row-container"
						label-width="77px"
					>
						<el-date-picker
							v-model="searchTime"
							type="daterange"
							range-separator="-"
							:start-placeholder="$t('report.start_date')"
							:end-placeholder="$t('report.end_date')"
							:picker-options="pickerShortcutWithCurrPeriod"
							:clearable="false"
						></el-date-picker>
					</el-form-item>
					<el-form-item
						label="总代账号:"
						class="flex-row-container"
						label-width="77px"
					>
						<el-input
							v-model="queryData.topProxyName"
							clearable
							size="medium"
							:placeholder="$t('common.please_enter')"
							v-symbols
							:disabled="loading"
							oninput="value=value.replace(/[\u4E00-\u9FA5]/g ,'')"
							@keyup.enter.native="enterSearch"
						></el-input>
					</el-form-item>
					<el-form-item>
						<el-button
							type="primary"
							icon="el-icon-search"
							size="medium"
							:disabled="loading"
							@click="search"
						>
							{{ $t('common.search') }}
						</el-button>
						<el-button
							icon="el-icon-refresh-left"
							size="medium"
							:disabled="loading"
							@click="reset"
						>
							{{ $t('common.reset') }}
						</el-button>
						<el-button
							v-if="hasPermission('90930376')"
							type="warning"
							icon="el-icon-download"
							size="medium"
							:disabled="loading"
							:loading="exportLoading"
							@click="handleExportExcel"
						>
							{{ $t('common.export') }}
						</el-button>
						<!-- <el-button
						type="success"
						icon="el-icon-sort"
						:disabled="loading"
						size="medium"
						@click="openColSettings"
					>
						{{ $t('common.row_set') }}
					</el-button> -->
					</el-form-item>
				</el-form>
				<el-link :underline="false" type="danger">
					{{ $t('report.refresh_warning_text') }}
				</el-link>
			</template>
			<template slot="content">
				<el-table
					key="father"
					v-loading="loading"
					element-loading-spinner="el-icon-loading"
					border
					ref="elTable"
					size="mini"
					class="small-size-table"
					:data="tableData"
					style="width: 100%"
					@sort-change="changeTableSort"
					:max-height="tableHeight"
					:header-cell-style="getRowClass"
				>
					<template v-for="(item, index) in newCol">
						<el-table-column
							:key="'column_' + index"
							:prop="item.prop"
							:align="item.alignCenter"
							:label="item.label"
							:min-width="item.minWidth"
							:fixed="item.isFixed"
							:sortable="item.isSortColumn"
							:show-overflow-tooltip="item.isShowTip"
							v-if="tableColumnData[item.label]"
						>
							<!-- 通过插槽为表头绑定mousedown和dragover方法 -->
							<template
								slot="header"
								slot-scope="{ column, $index }"
							>
								<span
									@mousedown="
										handleMounseDown($event, column, $index)
									"
									@dragover="
										handleDragover($event, column, $index)
									"
								>
									{{ item.label }}
								</span>
							</template>
							<template slot-scope="{ row }">
								<div v-if="item.solt === 'numberSolt'">
									{{ handleNumber('', row[item.prop], 0) }}
								</div>
								<div v-if="item.solt === 'amountSolt'">
									<el-link
										class="lightBlueColor"
										v-if="item.link"
										type="primary"
										@click="
											netAmountFn(row, row[item.prop])
										"
									>
										<span>
											{{
												handleTotalNumber(
													'USDT',
													row[item.prop]
												)
											}}
										</span>
									</el-link>
									<p v-else>
										{{
											handleTotalNumber(
												'USDT',
												row[item.prop]
											)
										}}
									</p>
								</div>
								<div v-if="item.solt === 'defaultSolt'">
									<span>
										{{ row[item.prop] || '-' }}
									</span>
								</div>
								<div v-if="item.solt === 'percentage'">
									<span v-if="!row[item.prop]">
										<el-link
											class="lightBlueColor"
											type="primary"
											@click="
												netAmountFn(row, row[item.prop])
											"
										>
											<span>
												查看详情
											</span>
										</el-link>
									</span>
									<span v-else>
										{{ (row[item.prop] || 0) + '%' }}
									</span>
								</div>
								<div v-if="item.solt === 'profit'">
									<el-link
										class="lightBlueColor"
										v-if="item.link"
										type="primary"
										@click="
											netAmountFn(row, row[item.prop])
										"
									>
										<span>
											{{ handleCurrency('$') }}
											{{
												handleNumber(
													'$',
													row[item.prop]
												)
											}}
										</span>
									</el-link>

									<span
										v-else
										:style="
											handleNumberColor(row[item.prop])
										"
									>
										{{ handleCurrency('$') }}
										{{ handleNumber('$', row[item.prop]) }}
									</span>
								</div>
							</template>
						</el-table-column>
					</template>
				</el-table>
				<!-- 分页 -->
				<el-pagination
					v-show="!!total"
					class="pageValue"
					:current-page.sync="pageNum"
					background
					layout="total, sizes,prev, pager, next, jumper"
					:page-size.sync="pageSize"
					:page-sizes="pageSizes"
					:total="total"
					:pager-count="9"
					@current-change="handleCurrentChange"
					@size-change="handleSizeChange"
				></el-pagination>
			</template>
			<el-dialog
				:title="$t('common.row_set')"
				center
				:visible.sync="colSettings.visible"
				width="475px"
				class="setting-div"
			>
				<div>
					<el-link type="primary" class="mb15" @click="clickDel">
						复原缺省
					</el-link>
				</div>
				<div
					v-for="(value, name1) in activityListField"
					:key="name1"
					class="setting-div"
				>
					<el-checkbox v-model="dialogColumnData[name1]">
						{{ name1 }}
					</el-checkbox>
				</div>
				<div slot="footer" class="dialog-footer">
					<el-button @click="colSettings.visible = false">
						{{ $t('common.cancel') }}
					</el-button>
					<el-button type="primary" @click="handleOrderList">
						{{ $t('common.submit') }}
					</el-button>
				</div>
			</el-dialog>

			<el-dialog
				:title="'平台占比详情'"
				:visible.sync="platformDialog"
				v-if="platformDialog"
				width="580px"
				@close="clear"
			>
				<div class="flex">
					<span style="margin-right: 10px;">
						总代账号:{{ rowVal.topProxyName }}
					</span>
					<span>业务模式:{{ rowVal.businessModel }}</span>
				</div>
				<div style="margin-top: 15px;">
					注册时间:{{ rowVal.createdAt }}
				</div>
				<el-table
					element-loading-spinner="el-icon-loading"
					size="mini"
					class="small-size-table"
					:data="tableDialogData"
					border
					style="width: 100%; margin: 15px 0"
					highlight-current-row
				>
					<el-table-column
						prop="name"
						align="center"
						label="场馆"
					></el-table-column>
					<el-table-column
						prop="name"
						align="center"
						label="代理占比"
					>
						<template slot-scope="scope">
							<span>
								{{ handlePercentage(scope.row.num1) }}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="name"
						align="center"
						label="平台占比"
					>
						<template slot-scope="scope">
							<span>
								{{ handlePercentage(scope.row.num2) }}
							</span>
						</template>
					</el-table-column>
				</el-table>
			</el-dialog>
		</main-content>
	</div>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { routerNames } from '@/utils/consts'
import summaryList from './components/summaryList'
import MainContent from '@/components/MainContent/index.vue'
import DatePickerShortcuts from '@/components/DatePickerShortcuts'
import { getColumns } from './components/columns'

const setSearchTime = () => [
	dayjs()
		.subtract(6, 'day')
		.startOf('day'),
	dayjs()
		.subtract(0, 'day')
		.endOf('day')
]
export default {
	name: routerNames.statusOverviewTripartite,
	components: {
		DatePickerShortcuts,
		MainContent
	},
	mixins: [list, summaryList],
	data() {
		return {
			tableHeight: 480,
			netAmountDialog: false,
			platformDialog: false,
			otherDependenComponents: [],
			exportLoading: false,
			queryData: {},
			tableDialogData: [
				{
					name: '体育',
					num1: 0,
					num2: 0
				},
				{
					name: '真人',
					num1: 0,
					num2: 0
				},
				{
					name: '电竞',
					num1: 0,
					num2: 0
				},
				{
					name: '彩票',
					num1: 0,
					num2: 0
				},
				{
					name: '棋牌',
					num1: 0,
					num2: 0
				},
				{
					name: '电子',
					num1: 0,
					num2: 0
				}
			],
			newCol: '',
			searchTime: setSearchTime(),
			tableData: [],
			subSummary: {},
			totalSummary: {},
			dateFlag: '1',
			merchantObj: '',
			axiosDate: '',
			colSettings: {
				visible: false,
				dialogColumnData: {}
			},
			activityListField: {},
			pageType: 'i',
			page: 1,
			size: 100,
			totalRecord: 0,
			title: '',
			isSet: false,
			rowVal: {},
			platformBottomRecord: [],
			totalSummaryPlatformBottom: {},
			dialogFormVisible: false,
			dialogForm: {
				reportDate: '',
				merchantId: '',
				merchantName: '',
				userName: '',
				parentProxyName: '',
				topProxyName: '',
				betAmount: '',
				netAmount: '',
				zhanchengRate: '',
				rebateRate: '',
				backflowRate: '',
				netwinAmount: '',
				platformBottomAmount: ''
			}
		}
	},
	computed: {},
	watch: {},
	created() {
		this.newCol = getColumns()
		for (const index in this.newCol) {
			this.activityListField[this.newCol[index].label] = true
		}
		this.initIndexDB('statusOverviewTripartite', this.activityListField)
	},
	mounted() {},
	methods: {
		staticsDateFn(val) {
			let dateStr = String(val)
			let formattedDate =
				dateStr.substr(0, 4) +
				'/' +
				dateStr.substr(4, 2) +
				'/' +
				dateStr.substr(6, 2)

			return formattedDate
		},
		netAmountFn(val, num) {
			console.log(val, num)
			this.rowVal = val
			this.platformDialog = true
			this.tableDialogData = [
				{
					name: '体育',
					num1: val.tyProxyRate,
					num2: val.tyPlatformRate
				},
				{
					name: '真人',
					num1: val.zrProxyRate,
					num2: val.zrPlatformRate
				},
				{
					name: '电竞',
					num1: val.djProxyRate,
					num2: val.djPlatformRate
				},
				{
					name: '彩票',
					num1: val.cpProxyRate,
					num2: val.cpPlatformRate
				},
				{
					name: '棋牌',
					num1: val.qpProxyRate,
					num2: val.qpPlatformRate
				},
				{
					name: '电子',
					num1: val.dzProxyRate,
					num2: val.dzPlatformRate
				}
			]
		},
		handleShortcutBtnClick(val) {
			this.searchTime = val
			this.search()
		},
		// 提交列设置数据
		handleOrderList() {
			this.colSettings.visible = false
			this.updateIndexDB()
			if (
				this.dialogColumnData['日期'] ||
				this.dialogColumnData['新增日期'] ||
				this.dialogColumnData['有效新增'] ||
				this.dialogColumnData['日活']
			) {
				this.newCol[0].show = true
			} else {
				this.newCol[0].show = false
			}
			if (
				this.dialogColumnData['德州保险'] ||
				this.dialogColumnData['德州服务费'] ||
				this.dialogColumnData['投注额'] ||
				this.dialogColumnData['有效投注额'] ||
				this.dialogColumnData['平台输赢'] ||
				this.dialogColumnData['返点线输赢'] ||
				this.dialogColumnData['占成线输赢'] ||
				this.dialogColumnData['盈利率']
			) {
				this.newCol[1].show = true
			} else {
				this.newCol[1].show = false
			}
			if (
				this.dialogColumnData['德州保险'] ||
				this.dialogColumnData['德州服务费'] ||
				this.dialogColumnData['综合场馆'] ||
				this.dialogColumnData['占成返点'] ||
				this.dialogColumnData['团队返点'] ||
				this.dialogColumnData['返点率'] ||
				this.dialogColumnData['预估场馆费用']
			) {
				this.newCol[2].show = true
			} else {
				this.newCol[2].show = false
			}
			if (
				this.dialogColumnData['净利润'] ||
				this.dialogColumnData['净利润率']
			) {
				this.newCol[3].show = true
			} else {
				this.newCol[3].show = false
			}
		},
		// 打开列设置弹框
		openColSettings() {
			this.getIndexDB(this.activityListField)
			this.colSettings.visible = true
		},
		clickDel() {
			this.dialogColumnData = {}
			for (const index in this.newCol) {
				let e = this.newCol[index]
				for (const j in e.data) {
					this.dialogColumnData[e.data[j].label] = true
				}
			}
		},
		changeTableSort({ column, prop, order }) {
			this.queryData.orderKey = prop
			if (order === 'ascending') {
				// 升序
				this.queryData.orderType = 'asc'
			} else if (column.order === 'descending') {
				// 降序
				this.queryData.orderType = 'desc'
			} else {
				delete this.queryData.orderKey
				delete this.queryData.orderType
			}
			this.loadData()
		},
		loadData() {
			if (+new Date() - 500 < this.axiosDate) return
			const timeArr = this.searchTime || []
			let params = {
				...this.queryData,

				startDate:
					this.dateFlag === '1'
						? Number(dayjs(timeArr[0]).format('YYYYMMDD'))
						: undefined,
				endDate:
					this.dateFlag === '1'
						? Number(dayjs(timeArr[1]).format('YYYYMMDD'))
						: undefined
			}
			params = this.getParams(params)
			this.tableData = []
			const minM = dayjs(timeArr[0])
			const maxM = dayjs(timeArr[1])
			const month = dayjs(maxM).diff(minM, 'month')
			if (month >= 12) {
				this.$message.warning(this.$t('report.12_month'))
				this.total = 0
				return
			}
			this.loading = true
			this.pageCurrency = this.merchantObj?.currency || ''
			this.$api
				.getTopProxyGameList(params)
				.then((res) => {
					this.loading = false
					this.axiosDate = +new Date()
					this.tableData = res?.data?.records || []
					this.total = res?.data?.total || 0
					this.subSummary = res?.data?.summary || {}
				})
				.catch(() => {
					this.loading = false
				})
			// this.$api
			// 	.getStatusOverViewTripartTotal(params)
			// 	.then((res) => {
			// 		this.loading = false
			// 		this.totalSummary = res?.data || {}
			// 	})
			// 	.catch(() => {
			// 		this.loading = false
			// 	})
		},
		goBack() {
			this.pageType = 'i'
			this.loadData()
			// this.tableData = []
			// 	this.search()
		},
		handleInputBetAmount(val) {
			// 限制小数点后最大2位小数,支持正值
			console.log(val)
			console.log(val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'))
			this.dialogForm.betAmount = val
				.replace(/[^\d.]/g, '')
				.replace(/\.{2,}/g, '.')
				.replace('.', '$#$')
				.replace(/\./g, '')
				.replace('$#$', '.')
				.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3') // 只能输入两个小数
		},
		handleInputNetAmount(val) {
			// 限制小数点后最大2位小数,支持正值和负值
			this.dialogForm.netAmount = val
				.replace(/[^\d.-]/g, '') // 清除“数字”和“.” "-"以外的字符
				.replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
				.replace('.', '$#$')
				.replace(/\./g, '')
				.replace('$#$', '.')
				.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3') // 只能输入两个小数
		},
		handleInputNetwinAmount(val) {
			// 限制小数点后最大2位小数,支持正值和负值
			this.dialogForm.netwinAmount = val
				.replace(/[^\d.-]/g, '')
				.replace(/\.{2,}/g, '.')
				.replace('.', '$#$')
				.replace(/\./g, '')
				.replace('$#$', '.')
				.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')
		},
		handleInputPlatformBottomAmount(val) {
			// 限制小数点后最大2位小数,支持正值和负值
			this.dialogForm.platformBottomAmount = val
				.replace(/[^\d.-]/g, '')
				.replace(/\.{2,}/g, '.')
				.replace('.', '$#$')
				.replace(/\./g, '')
				.replace('$#$', '.')
				.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')
		},
		handleInputBackflowRate(val) {
			//限制小数点后最大3位小数；限制数字范围0~100， 超出范围红色高亮提示“比例范围0-100
			this.dialogForm.backflowRate = val
				.replace(/[^\d.]/g, '')
				.replace(/\.{2,}/g, '.')
				.replace('.', '$#$')
				.replace(/\./g, '')
				.replace('$#$', '.')
				.replace(/^(\-)*(\d+)\.(\d\d\d).*$/, '$1$2.$3')
		},
		handleInputZhanchengRate(val) {
			//限制小数点后最大3位小数；限制数字范围0~100， 超出范围红色高亮提示“比例范围0-100
			this.dialogForm.zhanchengRate = val
				.replace(/[^\d.]/g, '')
				.replace(/\.{2,}/g, '.')
				.replace('.', '$#$')
				.replace(/\./g, '')
				.replace('$#$', '.')
				.replace(/^(\-)*(\d+)\.(\d\d\d).*$/, '$1$2.$3')
		},
		handleInputRebateRate(val) {
			//限制小数点后最大3位小数；限制数字范围0~100， 超出范围红色高亮提示“比例范围0-100
			this.dialogForm.rebateRate = val
				.replace(/[^\d.]/g, '')
				.replace(/\.{2,}/g, '.')
				.replace('.', '$#$')
				.replace(/\./g, '')
				.replace('$#$', '.')
				.replace(/^(\-)*(\d+)\.(\d\d\d).*$/, '$1$2.$3')
		},
		// 输入比例校验
		getVaLiDate() {
			return (rule, value, callback) => {
				this.$nextTick(() => {
					if (!value && value !== 0) {
						callback(new Error('请输入比例'))
					} else if (value > 100 || value < 0) {
						callback(new Error(`比例范围0-100`))
					} else {
						callback()
					}
					// this.getValidated()
				})
			}
		},
		viewUserDetail(val) {
			if (this.dialogForm.userName && this.dialogForm.merchantId) {
				this.$api
					.getOutlineInfo({
						userName: this.dialogForm.userName,
						merchantId: this.dialogForm.merchantId
					})
					.then((res) => {
						this.dialogForm.parentProxyName =
							res.data.parentProxyName
						this.dialogForm.topProxyName = res.data.topProxyName
						this.dialogForm.merchantName = res.data.merchantName
					})
					.catch(() => {
						this.dialogForm.parentProxyName = ''
						this.dialogForm.topProxyName = ''
						this.dialogForm.merchantName = ''
					})
			}
		},
		addPlatformBottom() {
			this.title = '新增'
			this.dialogForm = {
				reportDate: this.curReportDate,
				merchantId: '',
				merchantName: '',
				userName: '',
				parentProxyName: '',
				topProxyName: '',
				betAmount: '',
				netAmount: '',
				zhanchengRate: '',
				rebateRate: '',
				backflowRate: '',
				netwinAmount: '',
				platformBottomAmount: ''
			}
			this.dialogFormVisible = true
		},
		editPlatformBottom(val) {
			this.title = '修改'
			this.dialogForm = {
				id: val.id,
				reportDate: val.reportDate,
				merchantId: val.merchantId,
				merchantName: val.merchantName,
				userName: val.userName,
				parentProxyName: val.parentProxyName,
				topProxyName: val.topProxyName,
				betAmount: val.betAmount,
				netAmount: val.netAmount,
				zhanchengRate: val.zhanchengRate,
				rebateRate: val.rebateRate,
				backflowRate: val.backflowRate,
				netwinAmount: val.netwinAmount,
				platformBottomAmount: val.platformBottomAmount
			}
			this.dialogFormVisible = true
		},
		deletePlatformBottom(val) {
			const { id } = val
			this.$confirm(
				`<strong>确认删除台底?</strong>
        </br>`,
				// this.$t('common.success_tip'),
				{
					dangerouslyUseHTMLString: true,
					confirmButtonText: this.$t('common.confirm'),
					cancelButtonText: this.$t('common.cancel'),
					type: 'warning'
				}
			)
				.then(() => {
					this.$api.platformBottomRecordDelete({ id }).then((res) => {
						const { code } = res
						if (res && code === 200) {
							this.$message.success('操作成功')
							this.getPlatformBottomRecord()
						}
					})
				})
				.catch(() => {})
		},
		subAddOrEdit() {
			this.$confirm(
				`<strong>确认${
					this.title === '新增' ? '新增' : '修改'
				}台底?</strong>
        </br>`,
				// this.$t('common.success_tip'),
				{
					dangerouslyUseHTMLString: true,
					confirmButtonText: this.$t('common.confirm'),
					cancelButtonText: this.$t('common.cancel'),
					type: 'warning'
				}
			)
				.then(() => {
					this.$refs.formSub.validate((valid) => {
						if (valid) {
							if (this.title === '新增') {
								this.$api
									.platformBottomRecordAdd(this.dialogForm)
									.then((res) => {
										const { code } = res
										if (res && code === 200) {
											this.$message.success('操作成功')
											this.pageNum = 1
											this.getPlatformBottomRecord()
										}
										this.dialogFormVisible = false
									})
									.catch(() => {})
							} else {
								this.$api
									.platformBottomRecordUpdate(this.dialogForm)
									.then((res) => {
										const { code } = res
										if (res && code === 200) {
											this.$message.success('操作成功')
											this.getPlatformBottomRecord()
										}
										this.dialogFormVisible = false
									})
									.catch(() => {})
							}
						}
					})
				})
				.catch(() => {})
		},
		// 台底管理接口
		getPlatformBottomRecord() {
			const data = {}
			data.pageNum = this.page
			data.pageSize = this.size
			this.$api
				.platformBottomRecordPage({ reportDate: this.curReportDate })
				.then((res) => {
					if (res.code === 200) {
						this.platformBottomRecord = res.data.record || []
						this.totalRecord = res.data.totalRecord || 0
						this.totalSummaryPlatformBottom = res.data.summary
						this.pageType = 'platformBottomRecord'
					}
				})
		},
		// 台底管理按钮
		openPlatformBottom(val) {
			console.log(val)
			this.page = 1
			this.size = 100
			this.curReportDate = String(val.staticsDate)
			this.getPlatformBottomRecord()
		},
		clear() {
			this.$refs.formSub.resetFields()
		},
		handleCurrentChangeplatformBottomRecord(val) {
			this.page = val
			this.getPlatformBottomRecord()
		},
		handleSizeChangeplatformBottomRecord(val) {
			this.page = 1
			this.size = val
			this.getPlatformBottomRecord()
		},
		search() {
			this.pageNum = 1
			this.loadData()
		},
		reset() {
			this.pageNum = 1
			this.queryData = {}
			this.merchantObj = ''
			this.dateFlag = '1'
			this.searchTime = setSearchTime()
			if (this.$refs.elTable) {
				this.$refs.elTable.clearSort()
			}
			this.loadData()
		},
		handleExportExcel() {
			const timeArr = this.searchTime || []
			let params = {
				...this.queryData,

				startDate:
					this.dateFlag === '1'
						? Number(dayjs(timeArr[0]).format('YYYYMMDD'))
						: undefined,
				endDate:
					this.dateFlag === '1'
						? Number(dayjs(timeArr[1]).format('YYYYMMDD'))
						: undefined
			}
			this.exportLoading = true
			// params = this.getParams(params)
			this.exportExcelPublic({
				api: 'getTopProxyGameExport',
				params
			}).finally(() => {
				this.exportLoading = false
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.tips-box {
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -12px;
}
::v-deep .el-dialog__header {
	color: #909399;
	font-weight: 700;
}
::v-deep .el-table__fixed-footer-wrapper .cell,
::v-deep .el-table__footer-wrapper .cell {
	height: 100%;
	padding: 0 !important;
	margin: 0 !important;
	> div {
		height: 100%;
	}
}
::v-deep .footer_count_row {
	min-height: 50px;
	height: 50%;
	display: flex;
	font-weight: 700;
	padding: 5px 0;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}
::v-deep .footer_count_row_border {
	border-top: 1px solid #ebeef5;
}
::v-deep .is-group th {
	background-color: #f5f7fa !important;
}
::v-deep .maincontent .params {
	display: none;
}
.content-top {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-bottom: 10px;
}
::v-deep .rempadding .el-dialog__body {
	padding: 0;
	padding-bottom: 20px;
	.contentBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.contentBox,
	form {
		padding: 0 20px;
	}
}
</style>
